<template>
  <div class="comment-list">
    <div class="row clearfix">
      <div class="col ">
        <div class="input-label">名片昵称</div>
        <div class="input-box">
          <input type="text" class="search-input" v-model="searchCondition.cardName">
        </div>
      </div>
      <div class="col">
        <div class="input-label">关键词</div>
        <div class="input-box">
          <input type="text" class="search-input" v-model="searchCondition.keyword">
        </div>
      </div>

    </div>

     <div class="row clearfix">
      <div class="col2">
        <div class="input-label">发布时间</div>
        <div class="input-box">
            <Date-picker class="release-date" :value="searchCondition.createDate" format="yyyy/MM/dd HH:mm"
                     type="datetimerange" placement="bottom-start" placeholder="选择时间"
                     @on-change="selectCreateDate"  :editable="false"
            @on-clear="clearTime"></Date-picker>
        </div>
      </div>
      <div class="col action-box">
          <div class="search-btn search" @click="search()">查询</div>
        <div class="search-btn clear "  @click="reset()">清空</div>
      </div>
    </div>
    <!--列表-->
    <Table border :columns="tableOption" :data="commentList"></Table>
    <!--分页-->
    <div class="page" v-if="dataTotal>pageSize">
      <Page :total=dataTotal
            :pageSize=pageSize
            :current=pageNum
            @on-change="search"
            show-total>
      </Page>
    </div>
    <!--提示框-->
    <Modal class="warning-modal"
           v-model="showWarnModal"
           title="温馨提示"
           width="550"
           height="250"
    >
      <div class="warn-modal-body">
        <i class="modal-icon"></i>
        <p class="modal-content">{{warnContent}}</p>
      </div>
      <div slot="footer">
        <div class="warn-modal-footer">
          <span class="modal-close-btn" @click="closeModal">确定</span></div>
      </div>
    </Modal>
  </div>
</template>
<script>
  import index from  "./comment-list.js"
  export default index ;
</script>
<style scoped>
  .page {
    margin-top: 20px;
    margin-right: 20px;
    float: right;
  }

  .comment-list {
    padding: 43px 30px 0;
  }
  .comment-list .ivu-date-picker{
    width: 100%;
  }
  .comment-list .action-box{
    padding-left: 108px;
  }

</style>
